<template>
    <div ref="mychart" style="width: 450px; height: 350px;"></div>
</template>

<script setup>

import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'


/* 通过 ref 获取 Dom 元素: 【通过 ref 获取 DOM元素【Vue3 Composition API】】
https://www.bilibili.com/video/BV1Uq4y1L7oj/?share_source=copy_web&vd_source=11797d2715355519fb920653c1a14e31 */
const mychart = ref(null)

onMounted(() => {
    console.log(mychart.value);
    let mycharts = echarts.init(mychart.value)
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        series: [
            {
                type: 'gauge',
                axisLine: {
                    lineStyle: {
                        width: 30,
                        color: [
                            [0.3, '#67e0e3'],
                            [0.7, '#37a2da'],
                            [1, '#fd666d']
                        ]
                    }
                },
                pointer: {
                    itemStyle: {
                        color: 'inherit'
                    }
                },
                axisTick: {
                    distance: -30,
                    length: 8,
                    lineStyle: {
                        color: '#fff',
                        width: 2
                    }
                },
                splitLine: {
                    distance: -30,
                    length: 30,
                    lineStyle: {
                        color: '#fff',
                        width: 4
                    }
                },
                axisLabel: {
                    color: 'inherit',
                    distance: 40,
                    fontSize: 10
                },
                detail: {
                    valueAnimation: true,
                    formatter: '{value} km/h',
                    color: 'inherit'
                },
                data: [
                    {
                        name: "Speed",
                        value: 70,
                        detail: {
                            fontWeight: "normal",
                            fontSize: 22
                        }
                    },
                ]
            }
        ]
    }
    setInterval(function () {
        mycharts.setOption({
            series: [
                {
                    data: [
                        {
                            name: "Speed",
                            value: +(Math.random() * 100).toFixed(2),
                            detail: {
                                fontWeight: "normal",
                                fontSize: 22
                            }
                        }
                    ]
                }
            ]
        });
    }, 2000)
    mycharts.setOption(option)
    // 图表大小自适应
    window.addEventListener('resize', function () {
        mycharts.resize();
    });
})

</script>

<style lang="scss" scoped>

</style>